<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="true"
    title="自定义查询条件">
    <div style="margin: -15px -10px -15px -10px">
      <el-transfer
        refs="transfer"
        v-model="shows"
        :data="all_conditions"
        :titles="['常用查询','不常用查询']"
        @right-check-change="choose(false, $event)"
        @left-check-change="choose(true, $event)"
      >
<!--        <el-button style="width: 48.5%" slot="left-footer" @click="upHandler(true)">上移</el-button>-->
<!--        <el-button style="width: 48.5%" slot="left-footer">下移</el-button>-->
<!--        <el-button style="width: 48.5%" slot="right-footer" @click="upHandler(false)">上移</el-button>-->
<!--        <el-button style="width: 48.5%" slot="right-footer">下移</el-button>-->

      </el-transfer>
      <div class="buttons">
        <el-button type="primary" @click="submitCondition">设定</el-button>
        <el-button @click="init(now_conditions,other_conditions)">恢复默认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        chooseL: '',
        chooseR: '',
        visible: false,
        other_conditions : [],
        now_conditions :[],
        shows: [],
        all_conditions: [],
      }
    },
    created () {
    },
    methods: {
      init (now, other) {
        this.now_conditions = now
        this.other_conditions = other
        this.all_conditions = []
        this.shows = []
        for (let i in now) {
          this.all_conditions.push({
            key: Number(i),
            label: now[i],
            disabled: false
          })
        }
        for (let i in other) {
          this.shows.push(Number(i) + now.length)
          this.all_conditions.push({
            key: (Number(i) + now.length),
            label: other[i],
            disabled: false
          })
        }
        this.visible = true
      },
      // 选中
      choose (isL, item) {
        if (isL === true) {
          this.chooseL = item
        } else this.chooseR = item
      },
      // 上移
      upHandler (isL) {
        let item
        if (isL === true) {
          item = this.chooseL
          if (item.length === 1 && item > 0) {
            let temp = this.all_conditions[item].label
            this.all_conditions[item].label = this.all_conditions[item - 1].label
            this.all_conditions[item - 1].label = temp
            // let keyt = this.all_conditions[item].key
            // this.all_conditions[item].key = this.all_conditions[item - 1].key
            // this.all_conditions[item - 1].key = keyt
          } else if (item <= 0) {
            this.$message('已经到顶端了!')
          } else this.$message('上移只能选择单条数据！')
          // 右边
        } else {
          item = this.chooseR
          let len = this.all_conditions.length - this.other_conditions.length
          if (item.length === 1 && item > len) {
            let temp = this.all_conditions[item].label
            this.all_conditions[item].label = this.all_conditions[item - 1].label
            this.all_conditions[item - 1].label = temp
          } else if (item <= len) {
              this.$message('已经到顶端了！')
            } else this.$message('上移只能选择单条数据！')
          }
        },
      // 设定条件
      submitCondition () {
        let L = []
        for (let item = 0 ; item < this.chooseL.length; item ++) {
          L[item] = this.all_conditions[item].label
        }
        this.$http({
          url: this.$http.adornUrl('/put/hms_common_condition/fields'),
          method: 'post',
          data: {'conditions': L}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  let L = []
                  let R = []
                  let item
                  for (item = 0 ; item < this.chooseR.length; item ++) {
                    R[item] = this.all_conditions[item + L.length].label
                  }
                  this.visible = false
                  this.$emit('refresh', L, R)
                }
              }
            )
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {
                this.visible = false
              }
            })
          }
        })
      }
      }
  }
</script>
<style>
.el-dialog {
  width: 900px;
}
.el-transfer {
  margin-left: 8px;
}
.el-transfer-panel {
  width: 380px;
}
.buttons {
  margin-left: 190px;
}
.buttons .el-button {
  width: 240px;
  margin-top: 8px;
}
</style>
